import React, { useState } from 'react';
import { Layout, Menu, Button } from 'antd';
import {
  AppstoreOutlined,
  PlusOutlined
} from '@ant-design/icons';
import '@/styles/SidebarMenu.scss';
import { useNavigate } from 'react-router-dom';
import logo1 from '@/assets/side1.png'
import logo2 from '@/assets/side2.png'
import logo3 from '@/assets/side3.png'
import logo4 from '@/assets/side4.png'

const { Sider } = Layout;
const { SubMenu } = Menu;

const SidebarMenu: React.FC = () => {
  const navigator = useNavigate();
  const [selectedKeys, setSelectedKeys] = useState<string[]>(['/dachuang']);

  const handleClick = (e: { key: string }) => {
    setSelectedKeys([e.key]);
    navigator(e.key);
  };

  const menuItemStyle = {
    marginBottom: '0.9375rem',
    fontSize: '1.25rem',
    borderLeft: '0.125rem solid #d9d9d9',
    borderRadius: 0,
    marginLeft: '2.125rem',
  };

  // 内联样式函数
  const getItemStyle = (key: string, isSubMenuItem = false) => {
    if (selectedKeys.includes(key) && isSubMenuItem) {
      return {
        ...menuItemStyle,
        borderLeft: '0.25rem solid #1890ff',
        backgroundColor: '#f0f5ff',
      };
    }
    return menuItemStyle;
  };

  return (
    <div className="sidebar-container">
      <Sider width={285} className="site-layout-background sidebar">
        <div className="create-button-container">
          <Button type="primary" icon={<PlusOutlined />} className="gradient-button">
            创建应用
          </Button>
        </div>
        <Menu
          mode="inline"
          selectedKeys={selectedKeys}
          onClick={handleClick}
          style={{ borderRight: 0, fontSize: '1.1rem', padding: '0.625rem 0' }}
        >
          <SubMenu key="/dachuang" style={{ marginBottom: '0.9375rem' }} 
          icon={<img src={logo1} alt="大创广场" style={{ width: '1.2rem', height: '1.2rem', marginRight: '0px' }} />}
          title="大创广场">
            <Menu.Item key="/dachuang" style={{width:'15rem',...getItemStyle('/dachuang', true)}}>项目展示</Menu.Item>
            <Menu.Item key="/dachuang/zhushou" style={{width:'15rem',...getItemStyle('/dachuang/zhushou', true)}}>创新助手</Menu.Item>
            <Menu.Item key="/dachuang/saishi" style={{width:'15rem',...getItemStyle('/dachuang/saishi', true)}}>赛事信息</Menu.Item>
            <Menu.Item key="/dachuang/chengyuan" style={{width:'15rem',...getItemStyle('/dachuang/chengyuan', true)}}>成员招募</Menu.Item>
            <Menu.Item key="/dachuang/luntan" style={{width:'15rem',...getItemStyle('/dachuang/luntan', true)}}>社区论坛</Menu.Item>
          </SubMenu>
          <Menu.Item key="/moxing" style={{ marginBottom: '0.9375rem', display: 'flex', alignItems: 'center' }}>
            <img src={logo2} alt="2" style={{ width: '1.2rem', height: '1.3rem', marginRight: '10px', verticalAlign: 'middle' }} />
            <span style={{ verticalAlign: 'middle' }}>模型广场</span>
          </Menu.Item>
          <Menu.Item key="/shuju" style={{ marginBottom: '0.9375rem', display: 'flex', alignItems: 'center' }}>
            <img src={logo3} alt="2" style={{ width: '1.2rem', height: '1.3rem', marginRight: '9px', verticalAlign: 'middle' }} />
            <span style={{ verticalAlign: 'middle' }}>数据广场</span>
          </Menu.Item>
          <Menu.Item key="/yingyong" style={{ marginBottom: '0.7rem' }} icon={<AppstoreOutlined style={{ fontSize: '1.25rem' }} />}>
            应用广场
          </Menu.Item>
          <Menu.Item key="/zujian" style={{ marginBottom: '0.9375rem', display: 'flex', alignItems: 'center' }}>
            <img src={logo4} alt="2" style={{ width: '1.3rem', height: '1.3rem', marginRight: '8px', verticalAlign: 'middle' }} />
            <span style={{ verticalAlign: 'middle' }}>组件广场</span>
          </Menu.Item>
        </Menu>
      </Sider>
    </div>
  );
};

export default SidebarMenu;
